<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>"Markdown语法完整示例文档"</title>
    <meta name="author" content=""MD2DOCX项目"">
    <meta name="description" content=""这是一个包含所有Markdown语法的完整示例文档"">
    <meta name="keywords" content="["markdown", "文档", "示例"]">
    <style>

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Noto Sans', sans-serif;
            line-height: 1.6;
            max-width: 900px;
            margin: 0 auto;
            padding: 20px;
            color: #333;
        }
        
        /* 目录样式 */
        .table-of-contents {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 6px;
            padding: 20px;
            margin-bottom: 30px;
        }
        
        .table-of-contents h2 {
            margin-top: 0;
            color: #495057;
        }
        
        .table-of-contents ul {
            list-style: none;
            padding-left: 0;
        }
        
        .table-of-contents li {
            margin: 5px 0;
        }
        
        .table-of-contents a {
            text-decoration: none;
            color: #007bff;
        }
        
        .table-of-contents a:hover {
            text-decoration: underline;
        }
        
        /* 代码样式 */
        code {
            background: #f1f3f4;
            padding: 2px 6px;
            border-radius: 4px;
            font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;
            font-size: 0.9em;
        }
        
        pre {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 6px;
            padding: 16px;
            overflow-x: auto;
            font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;
        }
        
        pre code {
            background: none;
            padding: 0;
            border-radius: 0;
        }
        
        /* 引用块样式 */
        blockquote {
            border-left: 4px solid #007bff;
            padding-left: 20px;
            margin: 20px 0;
            color: #6c757d;
            font-style: italic;
        }
        
        /* 表格样式 */
        table {
            border-collapse: collapse;
            width: 100%;
            margin: 20px 0;
        }
        
        th, td {
            border: 1px solid #dee2e6;
            padding: 12px;
            text-align: left;
        }
        
        th {
            background: #f8f9fa;
            font-weight: 600;
        }
        
        /* 任务列表样式 */
        .task-list-item {
            list-style: none;
        }
        
        .task-list-item input[type="checkbox"] {
            margin-right: 8px;
        }
        
        /* 脚注样式 */
        .footnotes {
            border-top: 1px solid #e9ecef;
            margin-top: 40px;
            padding-top: 20px;
            font-size: 0.9em;
        }
        
        .footnotes ol {
            padding-left: 20px;
        }
        
        .footnotes li {
            margin: 8px 0;
        }
        
        a[href^="#fn:"] {
            text-decoration: none;
            color: #007bff;
            font-weight: bold;
            padding: 2px 4px;
            border-radius: 3px;
            transition: background-color 0.2s;
        }
        
        /* 警告框样式 */
        .admonition {
            margin: 20px 0;
            padding: 16px;
            border-radius: 6px;
            border-left: 4px solid;
        }
        
        .admonition.note {
            background: #e7f3ff;
            border-color: #0366d6;
        }
        
        .admonition.warning {
            background: #fff5b4;
            border-color: #d1b910;
        }
        
        .admonition.danger {
            background: #ffeaea;
            border-color: #d73a49;
        }
        
        .admonition.info {
            background: #f0f9ff;
            border-color: #0969da;
        }
        
        .admonition.tip {
            background: #f0fff4;
            border-color: #28a745;
        }
        
        /* 键盘按键样式 */
        kbd {
            background: #f6f8fa;
            border: 1px solid #d1d9e0;
            border-radius: 3px;
            box-shadow: inset 0 -1px 0 #d1d9e0;
            color: #444d56;
            display: inline-block;
            font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
            font-size: 11px;
            line-height: 10px;
            padding: 3px 5px;
            vertical-align: middle;
        }
        
        /* 分割线样式 */
        hr {
            border: none;
            height: 1px;
            background: linear-gradient(to right, transparent, #e9ecef, transparent);
            margin: 30px 0;
        }
        
        /* 链接样式 */
        a {
            color: #007bff;
            text-decoration: none;
        }
        
        a:hover {
            text-decoration: underline;
        }
        
        /* 标题样式 */
        h1, h2, h3, h4, h5, h6 {
            margin-top: 24px;
            margin-bottom: 16px;
            font-weight: 600;
            line-height: 1.25;
        }
        
        h1 { border-bottom: 1px solid #e9ecef; padding-bottom: 8px; }
        h2 { border-bottom: 1px solid #e9ecef; padding-bottom: 8px; }
        
        /* 图片样式 */
        img {
            max-width: 100%;
            height: auto;
            border-radius: 6px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        
        /* 徽章样式 */
        img[src*="shields.io"], img[src*="badge"] {
            box-shadow: none;
            border-radius: 4px;
            margin: 2px;
        }
        
        /* 高亮文本样式 */
        mark {
            background: #ffeb3b;
            padding: 2px 4px;
            border-radius: 3px;
        }
        
        /* 插入文本样式 */
        ins {
            background: #d4edda;
            text-decoration: none;
            padding: 2px 4px;
            border-radius: 3px;
        }
        
        /* 删除文本样式 */
        del {
            background: #f8d7da;
            padding: 2px 4px;
            border-radius: 3px;
        }
        
        /* 剧透标签样式 */
        .spoiler {
            background: #000;
            color: #000;
            padding: 2px 4px;
            border-radius: 3px;
            cursor: pointer;
        }
        
        .spoiler:hover {
            color: #fff;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            body {
                padding: 10px;
            }
            
            .table-of-contents {
                padding: 15px;
            }
            
            pre {
                padding: 12px;
                font-size: 14px;
            }
            
            table {
                font-size: 14px;
            }
            
            th, td {
                padding: 8px;
            }
        }
    
    </style>
</head>
<body>
<div class="table-of-contents">
<h2>目录</h2>
<ul>
  <li><a href="#markdown语法完整示例文档">Markdown语法完整示例文档</a>
  <ul>
    <li><a href="#目录说明">目录说明</a></li>
    <li><a href="#基础文本格式">基础文本格式</a>
    <ul>
      <li><a href="#基本格式">基本格式</a></li>
      <li><a href="#扩展格式">扩展格式</a></li>
      <li><a href="#智能标点转换">智能标点转换</a></li>
    </ul></li>
    <li><a href="#标题层级">标题层级</a>
    <ul>
      <li><a href="#三级标题-custom-id">三级标题 {#custom-id}</a>
      <ul>
        <li><a href="#四级标题">四级标题</a>
        <ul>
          <li><a href="#五级标题">五级标题</a>
          <ul>
            <li><a href="#六级标题">六级标题</a></li>
          </ul></li>
        </ul></li>
      </ul></li>
    </ul></li>
    <li><a href="#列表功能">列表功能</a>
    <ul>
      <li><a href="#有序列表">有序列表</a></li>
      <li><a href="#无序列表">无序列表</a></li>
      <li><a href="#紧密列表cuddled-lists">紧密列表（cuddled-lists）</a></li>
      <li><a href="#任务列表">任务列表</a></li>
      <li><a href="#定义列表">定义列表</a></li>
    </ul></li>
    <li><a href="#表格功能">表格功能</a>
    <ul>
      <li><a href="#基础表格">基础表格</a></li>
      <li><a href="#对齐表格">对齐表格</a></li>
      <li><a href="#复杂表格">复杂表格</a></li>
    </ul></li>
    <li><a href="#代码功能">代码功能</a>
    <ul>
      <li><a href="#行内代码">行内代码</a></li>
      <li><a href="#围栏代码块">围栏代码块</a></li>
      <li><a href="#python交互式会话">Python交互式会话</a></li>
    </ul></li>
    <li><a href="#引用和警告">引用和警告</a>
    <ul>
      <li><a href="#基础引用块">基础引用块</a></li>
      <li><a href="#多段落引用">多段落引用</a></li>
      <li><a href="#警告框admonitions">警告框（Admonitions）</a></li>
    </ul></li>
    <li><a href="#链接和图片">链接和图片</a>
    <ul>
      <li><a href="#基础链接">基础链接</a></li>
      <li><a href="#引用式链接">引用式链接</a></li>
      <li><a href="#自动链接">自动链接</a></li>
      <li><a href="#脚注">脚注</a></li>
      <li><a href="#图片">图片</a>
      <ul>
        <li><a href="#本地图片">本地图片</a></li>
        <li><a href="#网络图片">网络图片</a></li>
        <li><a href="#带尺寸的图片">带尺寸的图片</a></li>
      </ul></li>
    </ul></li>
    <li><a href="#数学公式">数学公式</a>
    <ul>
      <li><a href="#行内公式">行内公式</a></li>
      <li><a href="#块级公式">块级公式</a></li>
    </ul></li>
  </ul></li>
  <li><a href="#endpmatrix">\end{pmatrix}</a>
  <ul>
    <li><a href="#高级功能">高级功能</a>
    <ul>
      <li><a href="#分割线">分割线</a></li>
      <li><a href="#转义字符">转义字符</a></li>
      <li><a href="#html标签">HTML标签</a></li>
      <li><a href="#键盘按键">键盘按键</a></li>
      <li><a href="#剧透标签">剧透标签</a></li>
      <li><a href="#mermaid图表">Mermaid图表</a></li>
      <li><a href="#任务进度">任务进度</a></li>
      <li><a href="#徽章和标签">徽章和标签</a></li>
      <li><a href="#元数据和属性">元数据和属性</a></li>
    </ul></li>
    <li><a href="#结语">结语</a></li>
  </ul></li>
</ul>

</div>
<div class="content">
<h1 id="markdown语法完整示例文档">Markdown语法完整示例文档</h1>

<p>这是一个包含<strong>所有Markdown语法</strong>的完整示例文档，用于测试markdown2的各种功能特性。</p>

<h2 id="目录说明">目录说明</h2>

<p>本文档将按照以下结构展示所有语法：</p>

<ol>
<li><a href="#基础文本格式">基础文本格式</a></li>
<li><a href="#标题层级">标题层级</a> </li>
<li><a href="#列表功能">列表功能</a></li>
<li><a href="#表格功能">表格功能</a></li>
<li><a href="#代码功能">代码功能</a></li>
<li><a href="#引用和警告">引用和警告</a></li>
<li><a href="#链接和图片">链接和图片</a></li>
<li><a href="#数学公式">数学公式</a></li>
<li><a href="#高级功能">高级功能</a></li>
</ol>

<hr />

<h2 id="基础文本格式">基础文本格式</h2>

<h3 id="基本格式">基本格式</h3>

<p>这是<strong>粗体文本</strong>，这是<em>斜体文本</em>，这是<strong><em>粗斜体文本</em></strong>。</p>

<p>这是<s>删除线文本</s>，这是<u>下划线文本</u>。</p>

<p>这是<code>行内代码</code>，这是==高亮文本==。</p>

<h3 id="扩展格式">扩展格式</h3>

<p>这是++插入文本++，这是!!重要强调文本!!。</p>

<p>这是上标：E = mc^2^，这是下标：H~2~O。</p>

<p>这是{{变量名}}，这是[[内部链接]]。</p>

<h3 id="智能标点转换">智能标点转换</h3>

<p>&#8220;智能引号"和&#8217;单引号&#8217;，em-dash：&#8211;，en-dash：-，省略号&#8230;</p>

<p>&#8220;This is a quote&#8221; &#8211; Author Name</p>

<h2 id="标题层级">标题层级</h2>

<h3 id="三级标题-custom-id">三级标题 {#custom-id}</h3>

<p>标题可以有自定义ID。</p>

<h4 id="四级标题">四级标题</h4>

<h5 id="五级标题">五级标题</h5>

<h6 id="六级标题">六级标题</h6>

<h2 id="列表功能">列表功能</h2>

<h3 id="有序列表">有序列表</h3>

<ol>
<li>第一项，包含<strong>粗体</strong>和<em>斜体</em>
<ol>
<li>嵌套有序项目1</li>
<li>嵌套有序项目2
<ul>
<li>混合嵌套无序项</li>
</ul></li>
</ol></li>
<li>第二项，包含<code>行内代码</code></li>
<li>第三项</li>
</ol>

<h3 id="无序列表">无序列表</h3>

<ul>
<li>无序第一项
<ul>
<li>嵌套无序项目1</li>
<li>嵌套无序项目2
<ul>
<li>深层嵌套项</li>
</ul></li>
</ul></li>
<li>无序第二项</li>
<li>无序第三项</li>
</ul>

<h3 id="紧密列表cuddled-lists">紧密列表（cuddled-lists）</h3>

<p>这段文字后面紧跟一个列表：</p>

<ul>
<li>紧密列表项1</li>
<li>紧密列表项2</li>
</ul>

<h3 id="任务列表">任务列表</h3>

<ul>
<li><input type="checkbox" class="task-list-item-checkbox" checked disabled> 已完成的任务</li>
<li><input type="checkbox" class="task-list-item-checkbox" checked disabled> 另一个已完成任务</li>
<li><input type="checkbox" class="task-list-item-checkbox" disabled> 待完成任务1</li>
<li><input type="checkbox" class="task-list-item-checkbox" disabled> 待完成任务2
<ul>
<li><input type="checkbox&#8221; class="task-list-item-checkbox&#8221; checked disabled> 嵌套已完成子任务</li>
<li><input type="checkbox&#8221; class="task-list-item-checkbox&#8221; disabled> 嵌套待完成子任务</li>
</ul></li>
</ul>

<h3 id="定义列表">定义列表</h3>

<p>术语1
:   这是术语1的定义</p>

<p>术语2
:   这是术语2的定义
:   术语2还有第二个定义</p>

<h2 id="表格功能">表格功能</h2>

<h3 id="基础表格">基础表格</h3>

<table>
<thead>
<tr>
  <th>列1标题</th>
  <th>列2标题</th>
  <th>列3标题</th>
</tr>
</thead>
<tbody>
<tr>
  <td>数据1</td>
  <td>数据2</td>
  <td>数据3</td>
</tr>
<tr>
  <td>数据4</td>
  <td>数据5</td>
  <td>数据6</td>
</tr>
</tbody>
</table>

<h3 id="对齐表格">对齐表格</h3>

<table>
<thead>
<tr>
  <th style="text-align:left;">左对齐</th>
  <th style="text-align:center;">居中对齐</th>
  <th style="text-align:right;">右对齐</th>
</tr>
</thead>
<tbody>
<tr>
  <td style="text-align:left;">左1</td>
  <td style="text-align:center;">中1</td>
  <td style="text-align:right;">右1</td>
</tr>
<tr>
  <td style="text-align:left;">左2</td>
  <td style="text-align:center;">中2</td>
  <td style="text-align:right;">右2</td>
</tr>
</tbody>
</table>

<h3 id="复杂表格">复杂表格</h3>

<table>
<thead>
<tr>
  <th style="text-align:left;"><strong>项目</strong></th>
  <th style="text-align:left;"><strong>开始时间</strong></th>
  <th style="text-align:left;"><strong>结束时间</strong></th>
  <th style="text-align:left;"><strong>状态</strong></th>
</tr>
</thead>
<tbody>
<tr>
  <td style="text-align:left;">需求分析</td>
  <td style="text-align:left;">2025-01-01</td>
  <td style="text-align:left;">2025-01-15</td>
  <td style="text-align:left;">✅ 完成</td>
</tr>
<tr>
  <td style="text-align:left;">系统设计</td>
  <td style="text-align:left;">2025-01-16</td>
  <td style="text-align:left;">2025-01-31</td>
  <td style="text-align:left;">🚧 进行中</td>
</tr>
<tr>
  <td style="text-align:left;">编码实现</td>
  <td style="text-align:left;">2025-02-01</td>
  <td style="text-align:left;">2025-03-15</td>
  <td style="text-align:left;">⏳ 计划中</td>
</tr>
<tr>
  <td style="text-align:left;">测试部署</td>
  <td style="text-align:left;">2025-03-16</td>
  <td style="text-align:left;">2025-03-31</td>
  <td style="text-align:left;">⏳ 计划中</td>
</tr>
</tbody>
</table>

<h2 id="代码功能">代码功能</h2>

<h3 id="行内代码">行内代码</h3>

<p>这是<code>行内代码</code>示例，可以在句子中<code>嵌入代码</code>。</p>

<h3 id="围栏代码块">围栏代码块</h3>

<div class="codehilite">
<pre><span></span><code><span class="k">def</span> <span class="nf">hello_world</span><span class="p">():</span>
<span class="w">    </span><span class="sd">&quot;&quot;&quot;</span>
<span class="sd">    这是一个Python函数示例</span>
<span class="sd">    &quot;&quot;&quot;</span>
    <span class="nb">print</span><span class="p">(</span><span class="s2">&quot;Hello, World!&quot;</span><span class="p">)</span>

    <span class="c1"># 支持语法高亮</span>
    <span class="k">for</span> <span class="n">i</span> <span class="ow">in</span> <span class="nb">range</span><span class="p">(</span><span class="mi">10</span><span class="p">):</span>
        <span class="nb">print</span><span class="p">(</span><span class="sa">f</span><span class="s2">&quot;数字: </span><span class="si">{</span><span class="n">i</span><span class="si">}</span><span class="s2">&quot;</span><span class="p">)</span>

    <span class="k">return</span> <span class="s2">&quot;完成&quot;</span>

<span class="c1"># 调用函数</span>
<span class="n">result</span> <span class="o">=</span> <span class="n">hello_world</span><span class="p">()</span>
</code></pre>
</div>

<div class="codehilite">
<pre><span></span><code><span class="c1">// JavaScript示例</span>
<span class="kd">function</span><span class="w"> </span><span class="nx">fibonacci</span><span class="p">(</span><span class="nx">n</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">n</span><span class="w"> </span><span class="o">&lt;=</span><span class="w"> </span><span class="mf">1</span><span class="p">)</span><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="nx">n</span><span class="p">;</span>
<span class="w">    </span><span class="k">return</span><span class="w"> </span><span class="nx">fibonacci</span><span class="p">(</span><span class="nx">n</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="mf">1</span><span class="p">)</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nx">fibonacci</span><span class="p">(</span><span class="nx">n</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="mf">2</span><span class="p">);</span>
<span class="p">}</span>

<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">fibonacci</span><span class="p">(</span><span class="mf">10</span><span class="p">));</span>
</code></pre>
</div>

<div class="codehilite">
<pre><span></span><code><span class="c1"># Shell脚本示例</span>
<span class="c1">#!/bin/bash</span>
<span class="nb">echo</span><span class="w"> </span><span class="s2">&quot;开始部署...&quot;</span>
npm<span class="w"> </span>install
npm<span class="w"> </span>run<span class="w"> </span>build
<span class="nb">echo</span><span class="w"> </span><span class="s2">&quot;部署完成!&quot;</span>
</code></pre>
</div>

<h3 id="python交互式会话">Python交互式会话</h3>

<div class="codehilite">
<pre><span></span><code><span class="gp">&gt;&gt;&gt; </span><span class="nb">print</span><span class="p">(</span><span class="s2">&quot;Python交互式示例&quot;</span><span class="p">)</span>
<span class="go">Python交互式示例</span>
<span class="gp">&gt;&gt;&gt; </span><span class="mi">2</span> <span class="o">+</span> <span class="mi">2</span>
<span class="go">4</span>
<span class="gp">&gt;&gt;&gt; </span><span class="kn">import</span> <span class="nn">math</span>
<span class="gp">&gt;&gt;&gt; </span><span class="n">math</span><span class="o">.</span><span class="n">pi</span>
<span class="go">3.141592653589793</span>
</code></pre>
</div>

<h2 id="引用和警告">引用和警告</h2>

<h3 id="基础引用块">基础引用块</h3>

<blockquote>
  <p>这是一个简单的引用块。</p>
  
  <p>引用块可以包含<strong>格式化文本</strong>和<em>斜体</em>。</p>
  
  <blockquote>
    <p>这是嵌套引用
    可以多层嵌套</p>
  </blockquote>
</blockquote>

<h3 id="多段落引用">多段落引用</h3>

<blockquote>
  <p>这是引用的第一段。</p>
  
  <p>这是引用的第二段，引用块可以包含多个段落。</p>
</blockquote>

<h3 id="警告框admonitions">警告框（Admonitions）</h3>

<p>!!! note &#8220;提示&#8221;
    这是一个提示信息框，用于显示重要的提示内容。</p>

<p>!!! warning &#8220;警告&#8221;
    这是一个警告信息框，用于显示需要注意的内容。</p>

<p>!!! danger &#8220;危险&#8221;
    这是一个危险警告框，用于显示可能造成损害的操作。</p>

<p>!!! info &#8220;信息&#8221;
    这是一个信息框，用于显示一般性信息。</p>

<p>!!! tip &#8220;小贴士&#8221;
    这是一个小贴士框，用于显示有用的建议。</p>

<h2 id="链接和图片">链接和图片</h2>

<h3 id="基础链接">基础链接</h3>

<p>这是一个<a rel="noopener" target="_blank" href="https://github.com">普通链接</a>。</p>

<p>这是一个<a rel="noopener" target="_blank" href="https://markdown2.readthedocs.io">新窗口打开的链接</a>{target="_blank"}。</p>

<p>这是一个<a rel="noopener" target="_blank" href="https://example.com" title="示例网站">带title的链接</a>。</p>

<h3 id="引用式链接">引用式链接</h3>

<p>这是<a rel="noopener" target="_blank" href="https://github.com" title="GitHub官网">引用式链接1</a>，这是<a rel="noopener" target="_blank" href="https://python.org" title="Python官网">引用式链接2</a>。</p>

<h3 id="自动链接">自动链接</h3>

<p>直接输入URL会自动转换：https://github.com</p>

<p>邮箱也会自动转换：example@email.com</p>

<h3 id="脚注">脚注</h3>

<p>这是一个包含脚注的句子<sup class="footnote-ref" id="fnref-1"><a href="#fn-1">1</a></sup>。这里还有另一个脚注<sup class="footnote-ref" id="fnref-2"><a href="#fn-2">2</a></sup>。</p>

<h3 id="图片">图片</h3>

<h4 id="本地图片">本地图片</h4>

<p><img src="test/assets/small_img.png" alt="本地小图片" /></p>

<p><img src="test/assets/windows11.png" alt="本地大图片" /></p>

<h4 id="网络图片">网络图片</h4>

<p><img src="&quot;https://via.placeholder.com/400x200/0066CC/FFFFFF?text=Sample+Image&quot;" alt="网络图片示例" /></p>

<h4 id="带尺寸的图片">带尺寸的图片</h4>

<p><img src="test/assets/small_img.png" alt="调整尺寸的图片" />{width=200px height=150px}</p>

<h2 id="数学公式">数学公式</h2>

<h3 id="行内公式">行内公式</h3>

<p>这是行内数学公式：$E = mc^2$，还有：$\pi = 3.14159$。</p>

<p>勾股定理：$a^2 + b^2 = c^2$</p>

<h3 id="块级公式">块级公式</h3>

<p>$$
\sum_{i=1}^{n} x_i = x_1 + x_2 + \cdots + x_n
$$</p>

<p>$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$</p>

<p>$$
\begin{pmatrix}
a &amp; b \
c &amp; d
\end{pmatrix}
\begin{pmatrix}
x \
y</p>

<h1 id="endpmatrix">\end{pmatrix}</h1>

<p>\begin{pmatrix}
ax + by \
cx + dy
\end{pmatrix}
$$</p>

<h2 id="高级功能">高级功能</h2>

<h3 id="分割线">分割线</h3>

<p>以下是不同样式的分割线：</p>

<hr />

<hr />

<hr />

<h3 id="转义字符">转义字符</h3>

<p>使用反斜杠转义：*不是斜体*，#不是标题。</p>

<h3 id="html标签">HTML标签</h3>

<div style="color: red; font-weight: bold;">
这是HTML标签示例，支持内嵌HTML。
</div>

<p><details>
<summary>点击展开详细内容</summary></p>

<p>这是可折叠的内容区域，点击上方可以展开/收起。</p>

<ul>
<li>列表项1</li>
<li>列表项2</li>
</ul>

<p></details></p>

<h3 id="键盘按键">键盘按键</h3>

<p>按 <kbd>Ctrl</kbd> + <kbd>C</kbd> 复制，按 <kbd>Ctrl</kbd> + <kbd>V</kbd> 粘贴。</p>

<h3 id="剧透标签">剧透标签</h3>

<blockquote>
  <p>! 这是剧透内容，默认会被隐藏</p>
</blockquote>

<h3 id="mermaid图表">Mermaid图表</h3>

<pre><code>graph TD
    A[开始] --&gt; B{是否满足条件?}
    B --&gt;|是| C[执行操作]
    B --&gt;|否| D[跳过操作]
    C --&gt; E[结束]
    D --&gt; E
</code></pre>

<pre><code>sequenceDiagram
    participant 用户
    participant 系统
    participant 数据库

    用户-&gt;&gt;系统: 发送请求
    系统-&gt;&gt;数据库: 查询数据
    数据库--&gt;&gt;系统: 返回结果
    系统--&gt;&gt;用户: 响应数据
</code></pre>

<h3 id="任务进度">任务进度</h3>

<ul>
<li><input type="checkbox" class="task-list-item-checkbox" checked disabled> 完成markdown基础语法</li>
<li><input type="checkbox" class="task-list-item-checkbox" checked disabled> 添加扩展语法支持  </li>
<li><input type="checkbox" class="task-list-item-checkbox" checked disabled> 实现表格功能</li>
<li><input type="checkbox" class="task-list-item-checkbox" checked disabled> 添加代码高亮</li>
<li><input type="checkbox" class="task-list-item-checkbox" disabled> 优化样式配置</li>
<li><input type="checkbox" class="task-list-item-checkbox" disabled> 添加更多主题</li>
</ul>

<h3 id="徽章和标签">徽章和标签</h3>

<p><img src="https://img.shields.io/github/stars/user/repo" alt="GitHub stars" />
<img src="https://img.shields.io/badge/license-MIT-blue" alt="License" />
<img src="https://img.shields.io/badge/version-1.0.0-green" alt="Version" /></p>

<h3 id="元数据和属性">元数据和属性</h3>

<p>这段文本有特殊属性{: .important #special-text}</p>

<h2 id="结语">结语</h2>

<p>这个文档展示了markdown2支持的所有主要语法特性，包括：</p>

<p>✅ <strong>基础语法</strong>：标题、段落、列表、链接、图片<br />
✅ <strong>格式化</strong>：粗体、斜体、删除线、代码<br />
✅ <strong>表格</strong>：基础表格、对齐、复杂表格<br />
✅ <strong>代码</strong>：行内代码、代码块、语法高亮<br />
✅ <strong>扩展语法</strong>：脚注、任务列表、数学公式<br />
✅ <strong>高级功能</strong>：警告框、图表、HTML支持  </p>

<p>这个样例文档可以用来测试markdown2的所有功能是否正常工作。</p>

<div class="footnotes">
<hr />
<ol>
<li id="fn-1">
<p>这是第一个脚注的内容，可以包含<strong>格式化文本</strong>。&#160;<a href="#fnref-1" class="footnoteBackLink" title="Jump back to footnote 1 in the text.">&#8617;</a></p>
</li>

<li id="fn-2">
<p>这是第二个脚注，可以包含多行内容。</p>

<p>甚至可以包含代码块：</p>

<div class="codehilite">
<pre><span></span><code><span class="nb">print</span><span class="p">(</span><span class="s2">&quot;脚注中的代码&quot;</span><span class="p">)</span>
</code></pre>
</div>

<p><a href="#fnref-2" class="footnoteBackLink" title="Jump back to footnote 2 in the text.">&#8617;</a></p>
</li>
</ol>
</div>

</div>
<script>
// 脚注悬停效果
document.querySelectorAll('a[href^="#fn:"]').forEach(function(link) {
    link.addEventListener('mouseenter', function() {
        this.style.backgroundColor = '#ffeb3b';
    });
    link.addEventListener('mouseleave', function() {
        this.style.backgroundColor = '';
    });
});
</script>
</body>
</html>